<template>
  <div class="template-container">
    <TableHead />
    <TableVue></TableVue>
    <!-- 新版 -->
    <a-modal
      v-model:visible="dispatchModal"
      :body-style="{ height: '100%', padding: '0' }"
      :title="t['操作']"
      fullscreen
      title-align="start"
      :footer="false"
    >
      <Dispatch></Dispatch>
    </a-modal>
    <!-- 旧版 -->
    <a-modal
      v-model:visible="showDispatch"
      :body-style="{ height: '100%', padding: '0' }"
      :title="t['操作']"
      fullscreen
      title-align="start"
      :footer="false"
    >
      <OldVersionDisPatch />
    </a-modal>

    <a-modal v-model:visible="showForm" width="800px" :footer="false" :mask-closable="false">
      <div class="flex">
        <FormVue class="flex-1"></FormVue>
        <div class="flex-1" v-auth v-if="!form.mediaId">
          <BulkUploadWithResult url="/media/device/warehouse/xlsx">
            <h4>{{ t["上传文件，批量新增"] }}</h4>
          </BulkUploadWithResult>
          <!-- <BulkOperation @success="onSuccess" url="/media/device/warehouse/xlsx"> 

          </BulkOperation> -->
        </div>
      </div>
    </a-modal>
    <Upgrade />
  </div>
</template>

<script setup lang="ts">
import OldVersionDisPatch from "../device/dispatch.vue";
import { showDispatch } from "../device/form";
import { dispatchModal, form, showForm } from "./data/form";
import { resetQuery } from "./data/table";
import Dispatch from "./dispatch/Dispatch.vue";
import { clearCanvasData } from "./dispatch/data/curd";
import FormVue from "./form/Form.vue";
import TableHead from "./table/TableHead.vue";
import Upgrade from "./table/Upgrade.vue";
import TableVue from "./table/table.vue";

const t = translate("公共模块");
watch(dispatchModal, (v) => {
  if (!v) {
    clearCanvasData();
  }
});
onUnmounted(() => {
  resetQuery();
});
</script>

<style lang="scss" scoped></style>
